<mat-card class="card-filter">
  <mat-card-header>
    <div class="filter-field">
      <mat-icon role="img">search</mat-icon>
      <div class="card-filter-field">
        <mat-form-field floatPlaceholder="Filter Service">
          <input matInput #filter placeholder="Filter Service" [ngModel]="searchTerm" 
          (ngModelChange)="displayFilter('label',$event)">
        </mat-form-field>
      </div>
    </div>
    <mat-spinner [diameter]='40' id="services-spinner" *ngIf="showSpinner">
    </mat-spinner> 
    <div class="view-controls" fxFlex="auto">
      <mat-button-toggle-group #viewMode="matButtonToggleGroup">
        <!-- <mat-button-toggle value="cards" (click)="saveValue('cards')">Cards</mat-button-toggle>
        <mat-button-toggle value="slim" (click)="saveValue('slim')">Slim</mat-button-toggle>
        <mat-button-toggle value="table" (click)="saveValue('table')">Table</mat-button-toggle> -->
      </mat-button-toggle-group>
    </div>
  </mat-card-header>
  <mat-card-content>
    <div fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between start" fxLayoutGap="5%">
      <services-table [conf]="this" [data]="cards" fxFlex="100" fxLayout="column"></services-table>
    </div>
  </mat-card-content>
</mat-card>
<div class="entity-cards-container" *ngIf="viewMode.value == 'cards' || viewMode.value == 'slim'">
  <div *ngFor="let card of cards; let i=index" class="entity-card-wrapper" [ngClass]="{'slim':viewMode.value == 'slim'}">
    <ng-template #cardfront let-name="name">
      <!-- Template for front face of card -->
      <div class="service-card">
        <div *ngIf="viewMode.value == 'cards'" class="service-bg" [ngStyle]="{'background-image': 'url(assets/images/services/' + card.title + '.png)'}"></div>
        <div class="side-content section">
          <div class="side-content-header">
            <button mat-fab class="service-power-btn" [ngClass]="{'service-power-btn-off':card.state == 'STOPPED','service-power-btn-on':card.state == 'RUNNING','service-power-btn-crash':card.state == 'CRASHED'}" (click)="toggle(card)" matTooltip="{{ card.state }}" matTooltipPosition="right">
              <mat-icon>power_settings_new</mat-icon>
            </button>
            <h3>{{ card.label }}</h3>
            <div [ngClass]="card.onChanging ? 'service-inline-spinner' : ''">
              <mat-spinner [diameter]='32' *ngIf="card.onChanging; else chipState"></mat-spinner>
            </div>
            <ng-template #chipState>
              <mat-chip>{{ card.state }}</mat-chip>
            </ng-template>
          </div>
          <div class="stats-info">
            <mat-checkbox 
              [(ngModel)]="card.enable" 
              (change)="enableToggle($event, card)" 
              matLine class="mr-1"
              labelPosition = 'before'>
                <strong id="start-label">Auto-start:</strong>
            </mat-checkbox>

          </div>
          <div class="service-controls">
            <button mat-button color="primary" (click)="editService(card.title)" *ngIf="card.title != 'netdata'">Configure</button>
            <button mat-button color="primary" (click)="editService(card.title)" *ngIf="card.title == 'netdata' && card.state == 'RUNNING'">Launch</button>
          </div>
        </div>
      </div>
    </ng-template>
    <!-- Create your cards here -->
    <entity-card [ngStyle]="cardStyles()" [conf]="cards[i]" [front]="cardfront" [back]="cardback" [lazyLoaded]="cards[i].lazyLoaded"></entity-card>
  </div>
</div>
